<!--空气，扬尘点位详情展示-->
<template>
    <div class="monitorC">
        <div class="monitorC_title">
            <span>监控面板</span>
        </div>
        <div class=" monitorC_bgcBox">
            <div class="monitorC_bgcBox_line"></div>
            <!--           -->
            <div  v-if="monitorData.length>0">
                <div class="monitorC_bgcBox_designation">
                    <div>点位名称：{{ siteBit.siteTypeName }}</div>
                    <div>位置：{{ siteBit.siteName }}</div>

                    <div v-if="runStatusCode === 'normal'" class="monitorC_bgcBox_designation_online">
                        在线
                    </div>
                    <div v-else class="monitorC_bgcBox_designation_onlines">
                        离线
                    </div>
                </div>
                <div class="monitorC_bgcBox_table">
                    <div class="monitorC_bgcBox_table_header">
                        <div style="width: 25%">因子</div>
                        <div style="width: 25%">监测值</div>
                        <div style="width: 25%">单位</div>
                        <div style="width: 25%">上报时间</div>
                    </div>
                    <div class="monitorC_bgcBox_table_subject userFlex">
                        <div class="monitorC_bgcBox_table_subject_row" v-for="(item,i) in monitorData" :key="i">
                            <div style="width: 25%">{{ item.factorName }}</div>
                            <div style="width: 25%">{{ item.factorValue }}</div>
                            <div style="width: 25%">{{ item.factorUnit }}</div>
                            <div style="width: 25%">{{ formatTime(siteBit.dataTime) }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else class="monitorC_bgcBox_noData">
                <LoadingSpinner v-if="isLoading"/>
            </div>
        </div>
        <div class="monitorC_close" @click="$emit('showViewViedo', false, '')"></div>
    </div>
</template>

<script>
import {getSiteReal} from "@/monitorApi/axios";
import LoadingSpinner from "@/components/loadingSpinner.vue";

export default {
    name: "detailsPage",
    props: {
        sensorId: String,
    },
    components:{
        LoadingSpinner
    },
    data() {
        return {
            showMonitor: true, //显示隐藏弹窗
            //安全应急类型
            monitorData: [],
            runStatusCode:'',
            siteBit:[],
            isLoading: true
        }
    },
    computed: {
        equipment() {
            return this.runStatusCode === 'offline' ? '离线' : this.runStatusCode === 'normal' ? '在线' : '';
        },
    },
    mounted() {
        this.getAir()
        // setTimeout(() => {
        //     this.isLoading = false;
        // }, 3000);
    },
    methods: {
        //空气，扬尘点位生成
        getAir() {
            let params = {
                'siteCode': this.sensorId,
                'monitorType': 'aqms'
            }
            getSiteReal(params).then(res => {
                this.siteBit = res.data
                this.monitorData = res.data.factors
                this.runStatusCode = res.data.runStatusCode
                console.log( this.monitorData, '空气，扬尘点位生成')
                this.isLoading = false;
            })
        },
        formatTime(timestamp) {
            const dateObj = new Date(timestamp);
            const hours = dateObj.getHours();
            const minutes = dateObj.getMinutes();
            const seconds = dateObj.getSeconds();

            // 对小时、分钟、秒数进行格式化，保持两位数的格式
            const formattedHours = hours.toString().padStart(2, '0');
            const formattedMinutes = minutes.toString().padStart(2, '0');
            const formattedSeconds = seconds.toString().padStart(2, '0');

            return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
        },

    }

}
</script>
<style lang="scss" scoped>
.monitorC {
    position: relative;
    width: 662px;
    height: 440px;
    display: flex;
    overflow: hidden;
    background-size: 100% 100%;
    background-image: url("@/assets/news/bg_news.png");
    flex-direction: column;

    .ws-player {
        width: 95%;
        height: 82%;
        margin-left: 2.5%;
        margin-top: 1.5%;
    }

    &_bgcBox {
        width: 600px;
        height: 350px;
        margin: 0 auto;
        &_noData{
            width: 600px;
            height: 320px;
            text-align: center;
            line-height: 320px;
            font-size: 15px;
            color: #999;
        }
        &_line {
            width: 600px;
            height: 1px;
            background-color: #467eb9;
            margin: 10px 0;
        }

        &_designation {
            width: 600px;
            height: 30px;
            display: flex;
            justify-content: space-between;
            font-size: 13px;
            font-family: Source Han Sans SC;
            font-weight: bold;
            color: #FFFFFF;

            margin: 0 auto;
            line-height: 30px;

            &_online {
                width: 50px;
                height: 28px;
                text-align: center;
                line-height: 30px;
                color: #d8d83d;
                border: 1px solid #d8d83d;
                border-radius: 4px;
            }
            &_onlines {
                width: 50px;
                height: 28px;
                text-align: center;
                line-height: 30px;
                color: #de2d2d;
                border: 1px solid #de2d2d;
                border-radius: 4px;
            }
        }

        &_table {
            width: 600px;
            height: 320px;
            font-size: 13px;
            font-family: Source Han Sans SC;
            font-weight: bold;
            color: #FFFFFF;

            &_header {
                width: 100%;
                height: 30px;
                line-height: 30px;
                display: flex;
                justify-content: space-between;
                background: rgba(98, 183, 255, 0.2);
                text-align: center;
                margin: 10px 0;
            }

            &_subject {
                width: 100%;
                height: 260px;
                font-size: 12px;
                font-family: Source Han Sans SC;
                text-align: center;

                &_row {
                    width: 100%;
                    height: 25px;
                    text-align: center;
                    display: flex;
                    justify-content: space-between;
                    line-height: 25px;
                }

            }
        }

    }

    &_title {
        margin-left: 22px;
        width: 216px;
        height: 24px;
        margin-top: 30px;
        display: flex;
        flex-direction: row;
        align-items: center;
        background-size: 100% 100%;
        background-image: url("@/assets/bg_title1.png");

        span {
            height: 24px;
            font-size: 13px;
            font-family: Source Han Sans SC;
            font-weight: bold;
            color: #FFFFFF;
            margin-left: 11px;
            line-height: 24px;
            background: linear-gradient(0deg, #90CCFF 0%, #FAFAFB 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }


    &_close {
        position: absolute;
        right: 20px;
        cursor: pointer;
        top: 30px;
        width: 23px;
        height: 22px;
        background-size: 100% 100%;
        background-image: url("@/assets/news/icon_closenews.png");
    }

    .videoStyle {
        position: absolute;
        margin-top: 20px;
        width: 560px;
        height: 260px;
        margin-top: 60px;
        margin-left: 50px;
        max-height: 300px;
    }
}

.userFlex {
    scrollbar-width: none;
    /* firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
    overflow-y: auto;
}

.userFlex::-webkit-scrollbar {
    display: none;
    /* Chrome Safari */
}

</style>